import {Meta} from '@storybook/blocks';

<Meta title="Docs/Develop" />

## Development mode

`yarn start` runs CRA in development mode with hot reloading. Open http://localhost:3000 to see your code live.

## Build library

`yarn build:lib` bundles library code to `lib` folder in the root of project.

## `src` directory structure

Development takes place inside `src` directory. There are two subdirectories inside:

- `lib` is where your library code should live, this code will be bundled with rollup and published to NPM. Imports from `environment` directory are forbidden, eslint will throw an error. Exports from `src/lib/index.js` will be included in the library.
- `environment` is where your development code lives (CSS frameworks, demo code, mocks etc). Contents will not be bundled inside library. `src/index.js` defines what CRA will render in browser during development.

```bash
|-- environment # development code
|   └── App
|       |-- App.js
|       |-- App.module.css # CSS module
|       |-- App.spec.js # test file
|       |-- __snapshots__
|       |   └── App.spec.js.snap # test snapshot
|       └── index.js
|-- index.js # entry point for CRA
|-- lib # library code
|   |-- Component
|   |   |-- Component.js # Component will be exposed as a part of library
|   |   |-- Component.module.css # CSS module
|   |   |-- Component.spec.js # test file
|   |   |-- __snapshots__
|   |   |   └── Component.spec.js.snap # test snapshot
|   |   └── index.js
|   └── index.js # entry point for rollup build
└── setupTests.js
```
